<template>
<xDataSpreadsheet class="p-report"
    :config="config"
    :customConfig="customConfig"
    :templateData="templateData"
    :bindData="bindData"
    @saveData="saveData"
>
<template slot="content">
    <div class="i-layout-page-header">
        <PageHeader
            :title="`${lang.currentSelect}: ${currentSelect.name || ''}`"
            content=""
            hidden-breadcrumb
        >
            <template #logo>
            <toolbarFloatMenu :show="menuShow">
                <div class="deptTree-page">
                    <tableExpand
                    ref="table"
                        :columns="columns"
                        :data="reportData"
                        :loading="loading"
                        :config="config"
                        :pageSizeOpts="pageSizeOpts"
                        :pageNavigation="pageNavigation"
                        :queryFormItem="queryFormItem"
                        :collapseFormItem="collapseFormItem"
                        :action="action"
                        :additionalAction="additionalAction"
                        @loadPage="loadPage"
                        @handleCreate="handleCreate"
                        @handleDetail="handleDetail"
                        @handleEdit="handleEdit"
                        @handleDelete="handleDelete"
                        @handleDeleteMultiple="handleDeleteMultiple"
                        @handleSearch="handleSearch"
                        @handleReset="handleReset"
                        @handleDbClick="handleDbClick"
                    ></tableExpand>
                </div>
            </toolbarFloatMenu>
            </template>
        </PageHeader>
    </div>
    <new-add-modal
    v-bind="addNewPanel"
    ref="addModal"
    :modelType="modelType"
    :columns="formColumns"
    :rules="rules"
    :zIndex="zIndex"
    @submit="handleNewAddSubmit"
    ></new-add-modal>
    <edit-modal
    v-bind="editPanel"
    :modelType="modelType"
    :columns="formColumns"
    :rules="rules"
    :zIndex="zIndex"
    @submit="handleEditSubmit"
    ></edit-modal>
    <read-modal
    v-bind="readPanel"
    :modelType="modelType"
    :columns="columns"
    :rules="rules"
    :zIndex="zIndex"
    ></read-modal>
</template>
</xDataSpreadsheet>
</template>
<script>
import xDataSpreadsheet from 'public/components/spreadSheet'
import * as defaultTemplateData from './templateData'
import toolbarFloatMenu from './parts/toolbarFloatMenu.vue';
import tableExpand from '@/pages/components/tableExpand.vue';
import newAddModal from '../components/newAddModal.vue';
import editModal from '../components/editModal.vue';
import readModal from '../components/readModal.vue';

export default {
    components: { xDataSpreadsheet, toolbarFloatMenu, tableExpand, newAddModal, editModal, readModal, },
    data() {
        return {
            menuShow: true,
            config: {},
            customConfig: {
                showUpload: false,
                showExport: false,
                showSave: false,
                showLoadData: false,
                isReport: false
            },
            templateData: [],
            bindData: {},
            id: 34,  // 先写固定值
            loading:false,
            config: {
                search: false,
                addButton: false,
                batchDeleteButton: false,
                tableSizeIcon: false,
                fullscreenIcon: false,
                refreshIcon: false,
                columnSettingIcon: false,
                showCheck:false,
                action: false,
                additionalAction: true,
                pageAdditionalAction: false
            },
            action: {
                edit: true,
                delete: true,
                detail: true
            },
            pageSizeOpts: [10, 30, 50, 100],
            pageNavigation: { total: 0, pageSize: 10, pageNumber: 1 },
            addNewPanel: {
                width: 1024,
                zIndex: 100,
                titleStyle: {},
                drawer: {
                    show: false
                },
                cols: 2
            },
            editPanel: {
                width: 1024,
                zIndex: 100,
                titleStyle: {},
                drawer: {
                    show: false
                },
                cols: 2,
                data: {}
            },
            readPanel: {
                width: 1024,
                zIndex: 100,
                titleStyle: {},
                drawer: {
                    show: false
                },
                cols: 2,
                data: {}
            },
            zIndex: 1000,
            modelType:'report',
            type:'report',
            rules: {
                name: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                componentId: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ]
            },
            currentSelect:{},
            reportData:[],
            templateOptions:[],
        }
    },
    computed: {
        lang () {
            return {
                'en-US': {
                    cancel: "cancel",
                    confirmDelete: "confirm delete?",
                    status: "status",
                    remark: "remark",
                    currentSelect: 'current select'
                },
                'zh-CN': {
                    cancel: "取消",
                    confirmDelete: "确认删除？",
                    status: "状态",
                    remark: "备注",
                    currentSelect: '当前选中'
                }
            }[this.G_Locale];
        },
        columns() {
            return [
                {
                    key: "name",
                    title: {
                        "zh-CN": "名称",
                        "en-US": "name",
                    }[this.G_Locale],
                    minWidth: 100,
                    align: "center",
                    show: true,
                },
                {
                    key: "componentId",
                    title: {
                        "zh-CN": "报表数据源名",
                        "en-US": "componentId",
                    }[this.G_Locale],
                    minWidth: 100,
                    align: "center",
                    render: (h, params) => {
                        let list =this.templateOptions.filter(item=>item.value==params.row.componentId);
                        return h('div', {}, list.length>0?list[0].label:'');
                    },
                    config: { type: 'select' ,disabled: true, options: this.templateOptions},
                    show: true,
                },
            ]
        },
        // form中列字段
        formColumns() {
            return [
                {
                    key: "name",
                    title: {
                        "zh-CN": "名称",
                        "en-US": "name",
                    }[this.G_Locale],
                    minWidth: 100,
                    align: "center",
                    config: { type: "text" },
                },
                {
                    key: "componentId",
                    title: {
                        "zh-CN": "报表数据源名",
                        "en-US": "componentId",
                    }[this.G_Locale],
                    minWidth: 100,
                    align: "center",
                    config: { type: 'select' , options: this.templateOptions}
                },
            ];
        },
        queryFormItem() {
            return [
                {
                    key: "name",
                    title: {
                        "zh-CN": "名称",
                        "en-US": "name",
                    }[this.G_Locale],
                    minWidth: 100,
                    align: "center",
                    config: { type: "text" },
                },
            ];
        },
        collapseFormItem() {
            return [
                {
                    key: "name",
                    title: {
                        "zh-CN": "名称",
                        "en-US": "name",
                    }[this.G_Locale],
                    minWidth: 100,
                    align: "center",
                    config: { type: "text" },
                },
            ];
        },
        additionalAction () {
            let additionalAction = {
                key: 'additionalAction',
                title: {
                    'zh-CN': '附加操作',
                    'en-US': 'additional action'
                }[this.G_Locale],
                slot: 'additionalAction',
                width: 70,
                fixed: 'right',
                align: 'center',
                show: true,
                buttons: [
                    { title: {
                          'zh-CN': '查看',
                          'en-US': 'read detail'
                      }[this.G_Locale],
                      event: (row, index) => this.handleDetail(row, index)
                    },
                ]
            }
            this.G_IsMobile && (additionalAction.width = 90)
            return additionalAction;
        },
    },
    beforeMount() {
        const params = new URLSearchParams(window.location.search)
        // this.id = params.get('id') || this.id;
    },
    mounted() {
        this.collectionObject = this.$modelObject.create('templateCollection');
        this.collectionObject=this.$modelObject.create('statTemplateModelCollection');
        this.loadPage(this.pageNavigation, null);
        this.loadTomplateData();
        // 通过接口获取模板配置
        // this.loadTemplate()

        // // 通过接口获取绑定数据
        // setTimeout(() => {
        //     // this.loadData()
        // }, 3000);
    },
    methods: {
        loadTomplateData(){
            this.loading=true;
            this.collectionObject.query(null).then(flag=>{
                if(flag){
                    let options = this.collectionObject.records.map(item=>{
                        return {
                            label:item.comments,
                            value:String(item.id),
                        };
                    })
                    this.templateOptions = options;
                    this.loading=false;
                }else{
                    this.loading=false;
                }
            })
        },
        loadPage(pageNavigation, filter){
            filter = {
                ...filter,
            }
            this.loading = true;
            this.$api.PageReport.queryByPage(
                pageNavigation.pageNumber,pageNavigation.pageSize,filter
            ).then(res => {
                this.loading = false;
                this.pageNavigation.total = res.recordCount;
                this.reportData = res.records;
            })
        },
        handleCreate(){
            this.$set(this.addNewPanel.drawer, 'show', true);
        },
        handleDetail(row, index){
            this.$set(this.readPanel, 'data', row);
            this.$set(this.readPanel.drawer, 'show', true);
        },
        handleEdit(row, index){
            this.$set(this.editPanel, 'data', row);
            this.$set(this.editPanel.drawer, 'show', true);
        },
        handleDelete(row, index){
            let _this = this;
            this.$Modal.confirm({
                title: this.lang['confirmDelete'],
                cancelText: this.lang['cancel'],
                onOk () {
                    _this.$api.PageReport.delete(
                        row.id
                    ).then(res => {
                        _this.pageNavigation.total = _this.pageNavigation.total-1;
                        _this.reportData.splice(
                            index,
                            1
                        );
                    })
                }
            })
        },
        handleDeleteMultiple(){

        },
        handleSearch(filter){
            this.pageNavigation.pageNumber = 1;
            this.loadPage(this.pageNavigation, filter);
        },
        handleReset(){
            this.pageNavigation.pageNumber = 1;
            this.loadPage(this.pageNavigation, null);
        },
        handleNewAddSubmit(data){
            this.loading = true;
            this.$api.PageReport.add(data).then((res) => {
                this.loading = false;
                this.reportData.unshift(res);
                this.pageNavigation.total = this.pageNavigation.total+1;
                this.$set(this.addNewPanel.drawer, 'show', false);
                this.$Message.success('新增成功！')
            });
        },
        handleEditSubmit(data){
            this.$api.PageReport.update({
                id: data.id,
                name: data.name,
                componentId:data.componentId
            }).then(res => {
                this.$set(this.editPanel.drawer, 'show', false);
                this.reportData.splice(
                    index,
                    1,
                    res
                );
                this.$Message.success('保存成功！')
            })
        },
        handleDbClick(row,index){
            this.currentSelect = row;
            this.menuShow = !this.menuShow ;
            this.$api.PageReport.query({
                id: row.id
            }).then(res => {
                if (res && res.length && res[0].value && res[0].value.length) {
                    this.templateData = res[0].value
                } else {
                    this.templateData = defaultTemplateData.data
                }
            })
        },
        saveData(tmpData) {
            this.$api.PageReport.update({
                id: this.currentSelect.id,
                value: tmpData
            }).then(res => {
                this.$Message.success('保存成功！')
            })
        },
        loadTemplate() {
            // this.templateData = defaultTemplateData.data
            // return
            this.$api.PageReport.query({
                id: this.currentSelect.id
            }).then(res => {
                if (res && res.length && res[0].value && res[0].value.length) {
                    this.templateData = res[0].value
                } else {
                    this.templateData = defaultTemplateData.data
                    // this.$api.PageReport.add({
                    //     type: 'report',
                    //     name: 'report'
                    // })
                }
            })
        },
        loadData() {
            this.bindData = defaultTemplateData.mockBindData()
        }
    }
}
</script>

<style lang="scss">
.deptTree-page{
    width: 600px;
    margin-top: 10px;
}
.report-wrapper{
    height: calc(100% - 132px);
    overflow: hidden!important;;
}
</style>